<template>
  <div class="upload">
    <input type="file" ref="file" name="image" @change="onChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      defalutSize: 1,
      defalutType: ["image/jpeg", "image/jpg", "image/png", "image/gif"]
    };
  },
  methods: {
    async onChange(e) {
      let file = e.target.files[0];
      if (file) {
        const size = file.size / 1024 / 1024 / 5;
        const type = file.type;
        if (!this.beforUpload(size, type)) {
          this.$Message.error("上传的文件不满足要求");
          file = null;
          return;
        }
        let formData = new FormData();
        formData.append("img", file); // 通过append向
        let res = await this.$post("/api/upload", formData);
        if (res && res.code === 200) {
          this.$Message.success("上传成功");
          this.$refs.file.value = "";
          //   这里就体现了api单独分出来的好处。不用去注册事件。
        //   但是有个问题。image-check中要去调用图片接口。如果分出去了又得单独来写。感觉没必要
        } else {
          this.$refs.file.value = "";
          this.$Message.error("上传失败");
        }
      } else {
        this.$refs.file.value = "";
        // console.log("未选择文件11");
      }
    },
    beforUpload(size, type) {
      return this.defalutSize > size && this.defalutType.includes(type);
    }
  }
};
</script>